<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>jQuery UI 排序（Sortable） - 连接列表</title>
  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="jqueryui/style.css">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style>
    #sortable0,
    #sortable1,
    #sortable2 ,
    #sortable3{
      list-style-type: none;
      margin: 0;
      padding: 0 0 2.5em;
      float: left;
      margin-right: 10px;
    }
    #sortable0 li,
    #sortable1 li,
    #sortable2 li,
    #sortable3 li,
    li {
      margin: 0 5px 5px 5px;
      padding: 5px;
      font-size: 1.2em;
      width: 120px;
    }
  </style>
  <script>
    $(function () {
      $("#sortable1").sortable({
        helper: "clone",
        connectWith: ".connectedSortable",
        items: " li:not(#notMove)"
      });
      $("#sortable1").disableSelection();

      $("#sortable2").sortable({
        connectWith: ".connectedSortable",
        helper: "clone",
        // cursor: "move",
        items: " li:not(#notMove)"
      });
      $("#sortable2").disableSelection();

      $("#sortable3").sortable({
        connectWith: ".connectedSortable",
        helper: "clone",
        cursor: "move"
      });
      $("#sortable3").disableSelection();
    });



    $().ready(function (e) {
      //拖拽复制体
      $('.draggable').draggable({
        helper: "clone",
        cursor: "move"
      });

      //释放后
      $('.connectedSortable').droppable({
        drop: function (event, ui) {
          // console.log(event,ui)
          // $(this).children().remove();
          var source = ui.draggable.clone();
          // $('<img/>', {
          // 	src: 'btn_delete.png',
          // 	style:'display:none',
          // 	click: function() {
          // 	  source.remove();
          // 	}
          // }).appendTo(source);

          source.mouseenter(function () {
            $(this).find("img").show();
          });

          source.mouseleave(function () {
            $(this).find("img").hide();
          });

          $(this).append(source);

        }
      });

    });

    $(document).ready(function () {

      $(document).on('dblclick',"li",function(){
        alert("这个段落被双击。");
        $(this).remove()
      })
      // $(li).dblclick(function () {
      //   alert("这个段落被双击。");
      //   $(this).remove()
      // });
      // $("button").click(function(){
      //   var allData = last("sortable1")
      //   console.log(allData)
      // })

      $("button").click(function () {
        var allData = []
        $(".tc").each(function () {
          console.log($(this).attr("id"));
          allData.push(last($(this).attr("id")))
        })
        console.log(allData)
        return allData
      })
    });

    // 获取ui的所有值
    function last(sortTable) {
      var key = []
      $("#" + sortTable).each(function () {
        //var tmp;

        $(this).find('li').each(function () {
          //tmp = $(this).text();
          if ($(this).css("display") === "none") {
            // console.log($(this).text())
          } else {
            key.push($(this).text());
          }

        });

      });
      //遍历该数组可以获取所有值
      // for (var i = 0 ; i < key.length; i++) {
      //todo
      // }
      return key
    }
    // where is my 
  </script>
</head>

<body>


  <div class="container">

    <div class="row">

      <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
        <ul id="sortable3" class="connectedSortable">
          <li class="draggable btn btn-danger" style="width: 90%;" >PRO05</li>
          <li class="draggable btn btn-success" style="width: 90%;">PRO06</li>
        </ul>
      </div>
      <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
        <button type="button" class="btn btn-success">获取数量值</button>
        </ul>
      </div>


    </div>

  </div>

  <div class="row">

    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">

      <ul id="sortable0" class="connectedSortable" style="background-color: black;width: 145%;">
        <li class="btn btn-default" style="width: 90%;">时间</li>
        <li class="btn btn-default" style="width: 90%;">22/07/11</li>
        <li class="btn btn-default" style="width: 90%;">22/07/18</li>
        <li class="btn btn-default" style="width: 90%;">22/07/25</li>
        <li class="btn btn-default" style="width: 90%;">22/08/01</li>
        <li class="btn btn-default" style="width: 90%;">22/08/08</li>
        <li class="btn btn-default" style="width: 90%;">22/08/15</li>
        <li class="btn btn-default" style="width: 90%;">22/08/22</li>
        <li class="btn btn-default" style="width: 90%;">22/08/29</li>
      </ul>
    </div>

    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
      <ul id="sortable1" class="connectedSortable tc" style="background-color: rgba(220, 38, 38, 0.2);width: 145%;">
        <li id='notMove' class="btn btn-default" style="width: 90%;">台架01</li>
        <li class="btn btn-info" style="width: 90%;">PRO01</li>
        <li class="btn btn-info" style="width: 90%;">PRO01</li>
        <li class="btn btn-danger" style="width: 90%;">PRO02</li>
        <li class="btn btn-danger" style="width: 90%;">PRO02</li>
      </ul>
    </div>

    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
      <ul id="sortable2" class="connectedSortable tc" style="background-color: yellowgreen;width: 150%;">
        <li id='notMove' class="btn btn-default" style="width: 90%;">台架02</li>
        <li class="btn btn-warning" style="width: 90%;">PRO03</li>
        <li class="btn btn-warning" style="width: 90%;">PRO03</li>
        <li class="btn btn-primary" style="width: 90%;">PRO04</li>
        <li class="btn btn-primary" style="width: 90%;">PRO04</li>
      </ul>

    </div>
    

  </div>












</body>

</html>